<template>
  <div>
    <el-row style="width: 98%; padding: 15px 0 15px 0; margin: 0 auto">
      <el-col :span="2">
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="addResourceTypeDialogForm = true"
        >
          添加资源类别
        </el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-table
        ref="resourceTypeList"
        :data="
          resourceTypeList == null
            ? []
            : resourceTypeList.slice(
                (pageData.currentPage - 1) * pageData.pageSize,
                pageData.currentPage * pageData.pageSize
              )
        "
        @row-click="handleExpandRow"
        stripe
        border
        empty-text="当前没有数据，请添加数据"
        style="width: 98%; margin: 0 auto"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="resourceTypeName"
          label="资源类别英文名"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="resourceTypeTitle"
          label="资源类别中文名"
          align="center"
        ></el-table-column>
        <el-table-column show-overflow-tooltip align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleEditResourceType(scope.$index, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              @click="handleAddResourceTypeField(scope.$index, scope.row)"
            >
              添加字段
            </el-button>
            &emsp;&emsp;
            <template>
              <el-popconfirm
                @onConfirm="handleDeleteResourceType(scope.$index, scope.row)"
                title="确认删除该资源类别么？"
              >
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
        <el-table-column type="expand" align="center">
          <template slot-scope="props">
            <el-table :data="props.row.fields">
              <el-table-column
                prop="resourceTypeFieldId"
                label="字段id"
                width="80"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="resourceTypeFieldName"
                label="字段英文名"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="resourceTypeFieldTitle"
                label="字段中文名"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="resourceTypeFieldUnit"
                label="字段值单位"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="resourceTypeFieldType"
                label="字段数据类型"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="resourceTypeFieldRequired"
                label="字段是否必填"
                :formatter="formatterRequired"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="enumGroupName"
                label="枚举组"
                :formatter="formatterGroupName"
                align="center"
              ></el-table-column>
              <!-- 子表格操作列 -->
              <el-table-column
                show-overflow-tooltip
                align="center"
                label="操作"
                width="180px"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="
                      handleEditResourceTypeField(scope.$index, scope.row)
                    "
                  >
                    编辑
                  </el-button>
                  &emsp;&emsp;
                  <template>
                    <el-popconfirm
                      @onConfirm="
                        handleDeleteResourceTypeField(scope.$index, scope.row)
                      "
                      title="确认删除该字段么？"
                    >
                      <el-button slot="reference" type="text">删除</el-button>
                    </el-popconfirm>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        background
        :current-page="pageData.currentPage"
        :layout="layout"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageData.pageSize"
        :total="pageData.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-row>

    <!-- 添加资源类别或者添加字段信息弹窗 -->

    <el-dialog
      :title="title"
      @closed="changeDisabledStatusFalse"
      :visible.sync="addResourceTypeDialogForm"
      width="66%"
    >
      <el-form
        ref="addResourceTypeData"
        :model="addResourceTypeData"
        :label-width="formLabelWidth"
        style="width: 100%; margin: 0 auto"
      >
        <el-form-item
          label="资源类别英文名"
          prop="resourceType.resourceTypeName"
          :rules="[
            {
              required: true,
              message: '请完善资源类别英文名',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="addResourceTypeData.resourceType.resourceTypeName"
            :disabled="isEditResourceTypeName"
            placeholder="请输入资源类别英文名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="资源类别中文名"
          prop="resourceType.resourceTypeTitle"
          :rules="[
            {
              required: true,
              message: '请完善资源类别中文名',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            v-model="addResourceTypeData.resourceType.resourceTypeTitle"
            :disabled="isEditResourceTypeTitle"
            placeholder="请输入资源类别中文名"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="4">
            <el-button type="primary" @click="handleAddResourceTypeFieldData">
              添加字段
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="danger" @click="handleDeleteResourceTypeFieldData">
              删除选中字段
            </el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-table
            :data="addResourceTypeData.resourceTypeFieldList"
            :row-class-name="rowClassName"
            @selection-change="handleDetailSelectionChange"
          >
            <el-table-column
              type="selection"
              width="30"
              align="center"
            ></el-table-column>
            <el-table-column
              label="序号"
              prop="xh"
              align="center"
              width="50"
            ></el-table-column>
            <el-table-column label="字段英文名" align="center">
              <template slot-scope="scope">
                <el-form-item
                  style="margin-top: 18px"
                  label-width="20px"
                  label=" "
                  :prop="
                    'resourceTypeFieldList[' +
                    (scope.row.xh - 1) +
                    '].resourceTypeFieldName'
                  "
                  :rules="[
                    {
                      required: true,
                      message: '请完善字段英文名',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    v-model="
                      addResourceTypeData.resourceTypeFieldList[
                        scope.row.xh - 1
                      ].resourceTypeFieldName
                    "
                    placeholder="字段英文名"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="字段中文名" align="center">
              <template slot-scope="scope">
                <el-form-item
                  style="margin-top: 18px"
                  label-width="20px"
                  label=" "
                  :prop="
                    'resourceTypeFieldList[' +
                    (scope.row.xh - 1) +
                    '].resourceTypeFieldTitle'
                  "
                  :rules="[
                    {
                      required: true,
                      message: '请完善字段中文名',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    v-model="
                      addResourceTypeData.resourceTypeFieldList[
                        scope.row.xh - 1
                      ].resourceTypeFieldTitle
                    "
                    placeholder="字段中文名"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="字段值单位" align="center">
              <template slot-scope="scope">
                <el-form-item
                  style="margin-top: 18px"
                  label-width="20px"
                  label=" "
                  prop="resourceTypeFieldUnit"
                >
                  <el-input
                    v-model="
                      addResourceTypeData.resourceTypeFieldList[
                        scope.row.xh - 1
                      ].resourceTypeFieldUnit
                    "
                    placeholder="字段值单位"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="字段值类型" align="center">
              <template slot-scope="scope">
                <el-form-item
                  style="margin-top: 18px"
                  label-width="20px"
                  label=" "
                  :prop="
                    'resourceTypeFieldList[' +
                    (scope.row.xh - 1) +
                    '].resourceTypeFieldType'
                  "
                  :rules="[
                    {
                      required: true,
                      message: '请完善字段值类型',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-select
                    v-model="
                      addResourceTypeData.resourceTypeFieldList[
                        scope.row.xh - 1
                      ].resourceTypeFieldType
                    "
                    placeholder="字段值类型"
                  >
                    <el-option label="整数" value="number"></el-option>
                    <el-option label="浮点数" value="float"></el-option>
                    <el-option label="字符串" value="string"></el-option>
                    <el-option label="布尔" value="boolean"></el-option>
                    <el-option label="枚举" value="enum"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="字段是否必填" align="center">
              <template slot-scope="scope">
                <el-form-item
                  style="margin-top: 18px"
                  label-width="20px"
                  label=" "
                  :prop="
                    'resourceTypeFieldList[' +
                    (scope.row.xh - 1) +
                    '].resourceTypeFieldRequired'
                  "
                  :rules="[
                    {
                      required: true,
                      message: '请完善是否必填',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-select
                    v-model="
                      addResourceTypeData.resourceTypeFieldList[
                        scope.row.xh - 1
                      ].resourceTypeFieldRequired
                    "
                    placeholder="是否必填"
                  >
                    <el-option label="true" value="true"></el-option>
                    <el-option label="false" value="false"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="枚举组" align="center">
              <template slot-scope="scope">
                <el-form-item
                  v-if="
                    addResourceTypeData.resourceTypeFieldList[scope.row.xh - 1]
                      .resourceTypeFieldType == 'enum'
                  "
                  style="margin-top: 18px"
                  label-width="20px"
                  label=" "
                  :prop="
                    'resourceTypeFieldList[' +
                    (scope.row.xh - 1) +
                    '].enumGroupName'
                  "
                  :rules="[
                    {
                      required: true,
                      message: '请完枚举组信息',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-select
                    v-model="
                      addResourceTypeData.resourceTypeFieldList[
                        scope.row.xh - 1
                      ].enumGroupName
                    "
                    placeholder="枚举组"
                  >
                    <el-option
                      v-for="enumGroup in enumGroupList"
                      :key="enumGroup.enumGroupName"
                      :label="enumGroup.enumGroupTitle"
                      :value="enumGroup.enumGroupName"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addResourceTypeDialogForm = false">取消</el-button>
        <el-button type="primary" @click="handleAddResourceTypeData">
          提交
        </el-button>
      </div>
    </el-dialog>

    <!-- 修改资源类别信息弹窗 -->

    <el-dialog
      title="修改资源类别信息"
      :visible.sync="editResourceTypeDialogForm"
    >
      <el-form
        ref="editResourceTypeData"
        :rules="editResourceTypeDataRules"
        :model="editResourceTypeData"
        :label-width="formLabelWidth"
        style="width: 60%; margin: 0 auto"
      >
        <el-form-item label="资源类别英文名" prop="resourceTypeName">
          <el-input
            v-model="editResourceTypeData.resourceTypeName"
            placeholder="请输入资源类别英文名"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="资源类别中文名" prop="resourceTypeTitle">
          <el-input
            v-model="editResourceTypeData.resourceTypeTitle"
            placeholder="请输入资源类别中文名"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editResourceTypeDialogForm = false">取消</el-button>
        <el-button type="primary" @click="handleEditResourceTypeData">
          修改
        </el-button>
      </div>
    </el-dialog>

    <!-- 修改资源类别字段信息弹窗 -->
    <el-dialog
      title="修改资源类别字段信息"
      :visible.sync="editResourceTypeFieldDialogForm"
    >
      <el-form
        ref="editResourceTypeFieldData"
        :rules="editResourceTypeFieldDataRules"
        :model="editResourceTypeFieldData"
        :label-width="formLabelWidth"
        style="width: 60%; margin: 0 auto"
      >
        <el-form-item label="字段英文名" prop="resourceTypeFieldName">
          <el-input
            v-model="editResourceTypeFieldData.resourceTypeFieldName"
            placeholder="请输入字段英文名"
          ></el-input>
        </el-form-item>
        <el-form-item label="字段中文名" prop="resourceTypeFieldTitle">
          <el-input
            v-model="editResourceTypeFieldData.resourceTypeFieldTitle"
            placeholder="请输入字段中文名"
          ></el-input>
        </el-form-item>
        <el-form-item label="字段值单位" prop="resourceTypeFieldUnit">
          <el-input
            v-model="editResourceTypeFieldData.resourceTypeFieldUnit"
            placeholder="请输入字段值单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="字段值类型" prop="resourceTypeFieldType">
          <el-select
            v-model="editResourceTypeFieldData.resourceTypeFieldType"
            placeholder="请选择字段值类型"
          >
            <el-option label="整数" value="number"></el-option>
            <el-option label="浮点数" value="float"></el-option>
            <el-option label="字符串" value="string"></el-option>
            <el-option label="布尔" value="boolean"></el-option>
            <el-option label="枚举" value="enum"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字段是否必填" prop="resourceTypeFieldRequired">
          <el-select
            v-model="editResourceTypeFieldData.resourceTypeFieldRequired"
            placeholder="请选择是否必填"
          >
            <el-option label="true" value="true"></el-option>
            <el-option label="false" value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="editResourceTypeFieldData.resourceTypeFieldType == 'enum'"
          label="枚举组"
          prop="enumGroupName"
        >
          <el-select
            v-model="editResourceTypeFieldData.enumGroupName"
            placeholder="请选择枚举组"
          >
            <el-option
              v-for="enumGroup in enumGroupList"
              :key="enumGroup.enumGroupName"
              :label="enumGroup.enumGroupTitle"
              :value="enumGroup.enumGroupName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editResourceTypeFieldDialogForm = false">
          取消
        </el-button>
        <el-button type="primary" @click="handleEditResourceTypeFieldData">
          修改
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./resourceType.js"></script>
